import React,{Component} from 'react'
import {Card,Button,Table,message,Modal, Form, Input,Select } from 'antd'
import {PlusOutlined } from '@ant-design/icons'
import './index.scss'
// import ajax from '../../api/ajax'
import {reqCategorys,reqAddCategory} from '../../api/index' //【1】获取api接口函数

import { ArrowRightOutlined } from '@ant-design/icons';

const { Option } = Select;
/*商品分类
*/
export default  class Category extends Component{
  state = {
    loading:false, //控制是否显示加载动画
    list:[],
    categorys:[], //存放api接口获取的分类列表
    parentId:'0', //初始为0即请求一级产品分类列表        
    parentName:'', //当前子分类的对应父分类名
    subCategorys:[], //子分类列表数据,
    visible:false,//是否显示modal框
   
   


}
  componentDidMount(){
    // this.requestList();
    this.getCategorys();
}
//获取分类列表
// requestList=()=>{
//     ajax('/category/list', ).then((res)=>{
//       let list =res.data.list.map((item,index)=>{
//         item.key=index
//         return item
//       });
//       this.setState({
//         list:list
//       })
//     })
// }

//【3】异步请求一级分类列表
getCategorys = async (parentId)=>{
  // debugger
  this.setState({loading:true}) //设置加载中动画状态显示
  parentId=parentId || this.state.parentId //parentId等于传进来的参数或state里的值
   const result= await reqCategorys(parentId);
   //请求分类数据并赋值给result
  //  console.log(result)
  if(result.code==='0'){ //如果返回的code=0，说明返回成功，执行：
      const categorys=result.data.list //把返回数据赋值给categorys
      // console.log(categorys) //测试输出返回的数据
      if(parentId==='0'){ 
      this.setState({
          categorys, //把返回的数据赋值给state里
          loading:false, //【3】数据加载完成，取消loading动画显示

      })}else{
        console.log(categorys,parentId)
        let arr =categorys.map((Item)=>{
          return Item._id
        })
        console.log(arr)
                let d =arr.indexOf(parentId)
                console.log(d)

        this.setState({
          subCategorys:categorys[d].childlist1, //把返回的二级产品分类数据，赋值给state里     
          loading:false, //数据加载完成，取消loading动画显示
        })
      }
  }else{
      message.error('获取分类失败')
  }
}

 //【10】显示一级分类对应二级产品分类函数
 showSubCategory=(category)=>{
  //  debugger
  //【11】先更新状state的parentId为对应新分类的id
  this.setState({
      parentId:category._id,
      parentName:category.name,
  },()=>{/*【12】setState是异步执行，并不会马上更新完状态，
      因此需在其内部写（在状态更新且重新render()后执行）*/
      console.log('parentId',this.state.parentId)
      this.getCategorys()//获取二级分类列表
  })

 }
 
 showCategorys=()=>{
   this.setState({
     parentId:'0',
   })
 }


 //添加分类
 addCate= async (parentId,categoryName)=>{
  const result = await reqAddCategory(parentId,categoryName)
  if(result.code=== '0'){
      message.success('分类数据添加成功')
  }else{
      message.error('添加分类失败')
  }
}


handleClick=()=>{
  
}
showUpdata=()=>{
        this.setState({
          visible:true
        })
}
handleCancel=()=>{
  this.setState({
    visible:false
  })
}

    render(){  
      const {categorys,loading,subCategorys,parentId,parentName}=this.state;

      // const layout = {
      //   labelCol: { span: 8 },
      //   wrapperCol: { span: 16 },
      // };
      const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
      };
        var title= (parentId ==='0')? "产品分类管理":(
          <span>
            <Button type="link" onClick={this.showCategorys}>一级分类列表</Button>
            <ArrowRightOutlined  type={{marginRight:5}}/>    
            <span>
              {parentName}
            </span>
          </span>
           
   )
        
        const extra=(
         <Button type="primary" 
         onClick={this.showUpdata}
         >
             <PlusOutlined />
            添加
           </Button>
        )
      
          const columns = [
            {
              title: '分类的名称',
              dataIndex: 'name',
              width:700
            },
            {
               title: '操作',
               render:(category)  =>(
                  <span>
                    <Button type="link"> 修改分类</Button>
                   {this.state.parentId==='0'?<Button type="link" onClick={()=>this.showSubCategory(category)}> 查看子分类</Button>:null} 
                  </span>
               ),                    
            },
            
          ];
          
        return(
       <div className="Card-div">
         <Card title={title} bordered={true} style={{ width: "100%" }} 
         onClick={this.handleClick()}
         extra={extra} >
             <Table 
             
             dataSource={parentId==='0'? categorys:subCategorys} 
             columns={columns}  
             loading={loading}
             bordered={true} 
             rowKey="_id"
              ref="table"
              pagination={{defaultPageSize: 5, showQuickJumper: true}}
              />
             </Card>
             {/* 修改分类 */}
             <Modal
               title="添加分类数据"
             visible={this.state.visible}        
             onOk={this.addCate}
             onCancel={this.handleCancel}
             >
            
      <span>所属分类：</span>
      <br/>

      <Select defaultValue="电脑" style={{ width: 470 }} >
      <Option value="jack">家用电器</Option>
      <Option value="lucy">智能家具</Option>
      <Option value="disabled" >
        电脑
      </Option>
      <Option value="Yiminghe">图书</Option>
      <Option value="Yiminghe">上衣</Option>
    </Select>
    <br/>
    <br/>
          <label>添加子分类：</label>   
        <Input />    
   </Modal>
            </div>
        )
    }

}

